{% extends "app/base_site.html" %}

{% block title %} 报警管理 {% endblock title %}

{% block stylesheets %}
  {{ block.super }}

<link rel="stylesheet" href="/static/lib/jquery/fancybox/3.5.7/jquery.fancybox.min.css" />
<link rel="stylesheet" href="/static/lib/jquery/daterangepicker/daterangepicker.min.css"/>
<style>
    * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    }
    .xc_container {
        color: #333;
        line-height: 1.6;
        margin: 0 auto;
        padding: 10px 20px;
    }
    .xc_container>header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 3px;
        padding-bottom: 3px;
    }
    .xc_container>header>h1 {
        font-size: 20px;
        color: #1D2129;
        font-weight: 500;
    }
    .xc_action-buttons {
        display: flex;
        gap: 12px;
    }
    .xc_btn {
        padding: 8px 16px;
        border-radius: 6px;
        border: none;
        cursor: pointer;
        font-size: 14px;
        font-weight: 500;
        transition: all 0.2s ease;
        display: flex;
        align-items: center;
        gap: 6px;
    }
    .xc_btn_small {
        padding: 3px 5px;
        border-radius: 3px;
        border: none;
        cursor: pointer;
        font-size: 11px;

        transition: all 0.2s ease;
        display: flex;
        align-items: center;
        gap: 6px;
    }
    .xc_btn-secondary {
        background-color: #ecf0f1;
        color: #34495e;
    }
    .xc_btn-secondary:hover {
        background-color: #d5dbdb;
    }
    .xc_stats {
        background-color: #e8f4fd;
        padding: 8px 16px;
        border-radius: 6px;
        font-size: 14px;
        margin-left: 15px;
    }
    .xc_stats span {
        color: #e74c3c;
        font-weight: bold;
    }
    .xc_filters {
        background-color: white;
        padding: 8px 2px;
        border-radius: 10px;
        box-shadow: 0 2px 10px rgba(0,0,0,0.05);
        margin-bottom: 15px;
        display: flex;
        flex-wrap: wrap;
        gap: 15px;
        align-items: center;
    }
    .xc_filter-group {
        display: flex;
        align-items: center;
        gap: 5px;
    }
    .xc_filter-label {
        font-size: 12px;
        color: #555;
        white-space: nowrap;
    }
    select{
        padding: 4px 8px;
        border: 1px solid #ddd;
        border-radius: 6px;
        font-size: 14px;
        color: #333;
        background-color: white;
        transition: border-color 0.2s;
    }
    select:focus{
        outline: none;
        border-color: #3498db;
        box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.2);
    }
    .xc_date-range {
        display: flex;
        align-items: center;
        gap: 10px;
    }
    .xc_date-range>input[type="text"] {
        width: 180px;
        padding: 4px 8px;
        border: 1px solid #ddd;
        border-radius: 6px;
        font-size: 12px;
        color: #333;
        background-color: white;
        transition: border-color 0.2s;
    }
    .xc_date-range>input[type="text"]:focus {
        outline: none;
        border-color: #3498db;
        box-shadow: 0 0 0 2px rgba(52, 152, 219, 0.2);
    }
    .xc_video-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
        gap: 20px;
    }
    .xc_video-card {
        background-color: white;
        border-radius: 10px;
        overflow: hidden;
        box-shadow: 0 3px 12px rgba(0,0,0,0.07);
        transition: transform 0.3s ease, box-shadow 0.3s ease;
        cursor: pointer;
    }
    .xc_video-card:hover {
        transform: translateY(-5px);
        box-shadow: 0 8px 20px rgba(0,0,0,0.12);
    }
    .xc_video-thumbnail {
        position: relative;
        height: 160px;
        background-color: #000;
        overflow: hidden;
    }
    .xc_video-thumbnail img {
        width: 100%;
        height: 100%;
        object-fit: cover;
        opacity: 0.85;
        transition: opacity 0.1s;
    }
    .xc_video-card:hover .xc_video-thumbnail img {
        opacity: 1;
    }
    .xc_play-button {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        width: 40px;
        height: 40px;
        background-color: rgba(255,255,255,0.9);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        opacity: 0.8;
        transition: all 0.1s;
    }
    .xc_video-card:hover .xc_play-button {
        opacity: 1;
        transform: translate(-50%, -50%) scale(1.1);
    }
    .xc_play-button::after {
        content: '';
        width: 0;
        height: 0;
        border-style: solid;
        border-width: 8px 0 8px 14px;
        border-color: transparent transparent transparent #3498db;
        margin-left: 3px;
    }
    .xc_video-info {
        padding: 10px 15px;
    }
    .xc_video-title {
        font-size: 15px;
        font-weight: 600;
        color: #2c3e50;
        margin-bottom: 1px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .xc_video-meta {
        display: flex;
        justify-content: space-between;
        align-items: center;
        font-size: 13px;
        color: #7f8c8d;
    }

    /* 响应式调整 */
    @media (max-width: 1200px) {
        .xc_video-grid {
            grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
        }
    }
    @media (max-width: 768px) {
        .xc_filters {
            flex-direction: column;
            align-items: stretch;
        }
        .xc_filter-group {
            width: 100%;
        }
        select, input[type="date"] {
            width: 100%;
        }
        .xc_video-grid {
            grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
        }
        .xc_container>header {
            flex-direction: column;
            align-items: flex-start;
            gap: 15px;
        }
        .xc_action-buttons {
            width: 100%;
            justify-content: space-between;
        }
    }
</style>
<style>
    .xc_pagination {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 10px;
        padding-top: 10px;
        padding-bottom: 10px;
    }
    .xc_pagination>.xc_page-btn {
        min-width: 36px;
        height: 36px;
        border-radius: 6px;
        border: 1px solid #ddd;
        background-color: white;
        color: #555;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        transition: all 0.2s;
    }
    .xc_pagination>.xc_page-btn:hover:not(.xc_active) {
        border-color: #34495e;
        color: #34495e;
    }
    .xc_pagination>.xc_page-btn.xc_active {
        background-color: #34495e;
        color: white;

    }
    .xc_pagination>.xc_page-info {
        font-size: 14px;
        color: #7f8c8d;
    }
</style>
{% endblock stylesheets %}

{% block content %}

  <div class="right_col" role="main">
    <div class="">

    <div class="row">
        <div class="col-md-12">
            <div class="x_panel">
   <!-- xc page start -->
            <div class="xc_container">
                <header>
                    <h1>报警管理</h1>
                    <div style="display: flex; align-items: center;">
                        <div class="xc_action-buttons">
                            <button class="xc_btn xc_btn-secondary" onclick="f_handle('deleteAll')" >全部删除</button>
                            <button class="xc_btn xc_btn-secondary" onclick="f_handle('clearCache')" >清理缓存</button>
                        </div>

                        <div class="xc_stats">
                            <span id="top_loading" ><img class="top_loading_img" src="/static/images/load.gif" alt="loading">加载中</span>
                            <span id="top_msg"></span>
                        </div>

                    </div>
                </header>

                <div class="xc_filters">
                    <div class="xc_filter-group">
                        <input type="checkbox" id="check_all" style="margin-left: 10px;">
                    </div>
                    <div class="xc_filter-group">
                        <button class="btn btn-default btn-sm" onclick="f_handle('delete')" >批量删除</button>
                        <!--<button class="btn btn-default btn-sm" onclick="f_openExport('labelme')" >批量导出</button>-->
                    </div>
                    <div class="xc_filter-group">
                        <label class="xc_filter-label">类型:</label>
                            <select id="select_draw_type">
                                <option value="-1">选择全部</option>
                                <option value="1">画框</option>
                                <option value="0">不画框</option>
                            </select>
                    </div>
                <!--
                    <div class="xc_filter-group">
                        <label class="xc_filter-label">布控:</label>
                           <select id="select_control">
                            <option value="-1">选择全部</option>
                            {% for control in controls %}
                                <option value="{{ control.code }}">{{ control.code }}</option>
                            {% endfor %}
                          </select>
                    </div>-->
                    <div class="xc_filter-group">
                        <label class="xc_filter-label">视频:</label>
                        <select id="select_stream">
                             <option value="-1">选择全部</option>
                            {% for stream in streams %}
                                <option value="{{ stream.code }}">{{ stream.nickname }}</option>
                            {% endfor %}
                        </select>
                    </div>
                    <div class="xc_filter-group">
                        <label class="xc_filter-label">算法:</label>
                        <select id="select_flow">
                            <option value="-1">选择全部</option>
                            {% for flow in flows %}
                                <option value="{{ flow.code }}">{{ flow.name }}</option>
                            {% endfor %}
                       </select>
                    </div>
                    <div class="xc_date-range">
                        <input type="text" id="input_dateRange"  value="{{ startDate }} 至 {{ endDate }}">
                    </div>
                </div>

                <div class="xc_video-grid" id="data">
                    <!-- 其他视频卡片结构相同，已省略 -->
                </div>

            </div>
   <!-- xc page end -->
            </div>
        </div>
      </div>

    <div class="row">
        <div class="xc_pagination" id="pageData">
        </div>
    </div>

    </div>
  </div>
{% endblock content %}

{% block javascripts %}
  {{ block.super }}

    <!-- daterangepicker -->
<script src="/static/vendors/moment/min/moment.min.js"></script>
<script src="/static/lib/jquery/daterangepicker/jquery.daterangepicker.js"></script>

<script>

    let ele_top_loading = $("#top_loading");
    let ele_top_msg= $("#top_msg");
    let eleData = $("#data"); //列表数据
    let elePageData = $("#pageData");//列表翻页数据
    let eleCheckAll = $("#check_all");
    let temp_cur_page = 1;//当前页面
    let temp_cur_page_size = 12;//page size

    // 筛选条件 2024/7/4 新增
    let eleSelectDrawType = $("#select_draw_type");// select 选择画框类型（2025/5/28 v4.634新增）
    let eleSelectControl = $("#select_control");// select  选择布控
    let eleSelectStream = $("#select_stream");// select  选择视频流
    let eleSelectFlow = $("#select_flow");// select  选择算法流
    let eleInputDateRange = $('#input_dateRange');//日期范围

    let temp_drawType = "-1";//默认选择全部 string -1
    let temp_controlCode = "-1";//默认选择全部 string -1
    let temp_streamCode = "-1";//默认选择全部 string -1
    let temp_flowCode = "-1";//默认选择全部 string -1
    let temp_startDate = "";
    let temp_endDate = "";

    eleCheckAll.click(function() {
        $(".check_item").prop("checked", $(this).prop("checked"));
    });
    function f_open_player(stream_app,stream_name){
        window.open("/player?app="+stream_app+"&name="+stream_name);
    }
    function __f_get_alarm_ids_str(){
        let alarm_ids = [];
        $('.check_item').each(function(e) {
            //console.log("---------------------")
            //console.log($(e));
            //console.log($(this));
            //console.log(e);
            //console.log(this);
            //console.log($(this).prop("checked"));
            //console.log($(this).attr("value"));
            let is_check = $(this).prop("checked");// boolean 是否选中
            let alarm_id = $(this).attr("value");  // string 报警视频id
            //console.log(is_check,typeof is_check);
            //console.log(alarm_id,typeof alarm_id);
            if(is_check){
                alarm_ids.push(alarm_id);
            }
        });
        let alarm_ids_str = alarm_ids.join(",");
        //console.log("alarm_ids=",alarm_ids,typeof alarm_ids);
        //console.log("alarm_ids_str=",alarm_ids_str,typeof alarm_ids_str);

        return alarm_ids_str;
    }
    function f_edit(code){
        let url = "/alarm/edit?code="+code;
        window.open(url)
    }
    function f_openHandle(handle,alarm_ids_str,is_after_reload=true){
        ele_top_loading.show();
        $.ajax({
            url: '/alarm/openHandle',
            type: "post",
            async: true,
            data: {"handle":handle,"alarm_ids_str":alarm_ids_str},
            dataType: "json",
            timeout: 0,
            error: function () {
                   ele_top_loading.hide();
                myAlert("网络异常，请确定网络正常！", "error");
            },
            success: function (res) {
                   ele_top_loading.hide();
                if(1000===res.code){
                    if(is_after_reload){
                        myAlert(res.msg,"success",1000);
                        setTimeout(function () {
                            f_openIndex(temp_cur_page,temp_cur_page_size);
                         }, 1000);
                    }else{
                        myAlert(res.msg,"success");
                    }
                }else{
                    myAlert(res.msg,"error");
                }
            }
        });
    }
    function f_openExport(export_format){
        let alarm_ids_str = __f_get_alarm_ids_str();
        if(alarm_ids_str === ""){
            myAlert("请至少选择一条数据","error");
            return;
        }
        ele_top_loading.show();
        $.ajax({
            url: '/alarm/openExport',
            type: "post",
            async: true,
            data: {"export_format":export_format,"alarm_ids_str":alarm_ids_str},
            dataType: "json",
            timeout: 0,
            error: function () {
                ele_top_loading.hide();
                myAlert("网络异常，请确定网络正常！", "error");
            },
            success: function (res) {
                ele_top_loading.hide();
                if(1000===res.code){
                     let info = res.info;
                    myAlert(res.msg,"success",1000);
                    eleCheckAll.prop("checked", false);//恢复未选中状态（每次刷新页面前，都先恢复该按钮为未选中状态）
                    let export_filename = info["export_filename"];
                    let download_url = "/storage/download?filename="+export_filename;
                    window.open(download_url);

                }else{
                    myAlert(res.msg,"error");
                }
            }
        });
    }
    function f_handle(handle_type){
        if(handle_type === "clearCache"){
             f_openHandle(handle_type,"",false);//清理缓存（真实删除）
        }else if(handle_type === "deleteAll"){
             f_openHandle(handle_type,"",true);//全部删除（逻辑删除）
        }
        else if(handle_type === "delete"){//批量已读处理，批量删除（逻辑删除），批量导出处理
            let alarm_ids_str = __f_get_alarm_ids_str();
            if(alarm_ids_str === ""){
                myAlert("请至少选择一条数据","error");
            }else{
                f_openHandle(handle_type,alarm_ids_str,true);
            }
        }
    }
    function f_show_pageData(pageData) {
        let page_size = pageData["page_size"];
        let html = "";
        html+="<div class=\"xc_page-info\">共"+pageData["page_num"]+"页 / "+pageData["count"]+"条</div>";
        let pageLabels = pageData["pageLabels"];

        for (let i = 0; i < pageLabels.length; i++) {
            let cur = pageLabels[i]["cur"];
            //console.log("f_show_pageData",typeof cur,cur)
            if(cur === 1){
                html+="<div class=\"xc_page-btn xc_active\">"+pageLabels[i]["name"]+"</div>";
            }else{
                html+="<div class=\"xc_page-btn\" onclick=\"f_openIndex("+pageLabels[i]["page"]+","+page_size+")\" >"+pageLabels[i]["name"]+"</div>";
            }
        }
        elePageData.html(html);
    }
    function f_openIndex(page,page_size) {
        eleCheckAll.prop("checked", false);//恢复未选中状态（每次刷新页面前，都先恢复该按钮为未选中状态）
        let dateRange = eleInputDateRange.val();

        //console.log("f_openIndex()",page,page_size,temp_controlCode,temp_streamCode,temp_flowCode,"dateRange=",dateRange)

        temp_cur_page = page;
        temp_cur_page_size = page_size;

        ele_top_loading.show();
        $.ajax({
               url: '/alarm/openIndex',
               type: "get",
               async: true,
               data: {
                   "p":page,
                   "ps":page_size,
                   "drawType":temp_drawType,
                   "controlCode":temp_controlCode,
                   "streamCode":temp_streamCode,
                   "flowCode":temp_flowCode,
                   "dateRange":dateRange,
               },
               dataType: "json",
               timeout: 0,
               error: function () {
                   ele_top_loading.hide();
                   myAlert("网络异常，请确定网络正常！","error");
               },
               success: function (res) {
                   ele_top_loading.hide();
                   let top_msg = res.top_msg;
                   ele_top_msg.html(top_msg);

                   if(1000 === res.code){
                       let data = res.data;
                       let data_length = data.length;

                       if(0===data_length){
                          eleData.html("<p style='margin-left: 10px;font-size:15px;'>暂无报警数据</p>");
                       }else{
                            let html = "";
                            eleData.html(html);
                            for (let i = 0; i < data_length; i++) {
                               let d = data[i];
                               let video_count = d["video_count"];
                               let imageUrl = d["imageUrl"];
                               let flow_name = d["flow_name"];
                               if(flow_name.length > 12){
                                   flow_name = flow_name.substring(0,12)+"...";
                               }
                               let state = d["state"];
                               let state_str;
                                if(state===0) {//未读
                                    state_str = "<span style=\"background-color:#337ab7 !important;border-radius: 3px;font-size:11px;padding:2px 4px;color:#ffffff;margin:0 3px;\">未处理</span>";
                                }else if(state===1){//已读-正常报警
                                    state_str = "<span style=\"background-color:#ac0b0b !important;border-radius: 3px;font-size:11px;padding:2px 4px;color:#ffffff;margin:0 3px;\">报警</span>";
                                }else if(state===2){//已读-误报
                                    state_str = "<span style=\"background-color:#bb751a !important;border-radius: 3px;font-size:11px;padding:2px 4px;color:#ffffff;margin:0 3px;\">误报</span>";
                                }else{
                                    state_str = "<span>未知</span>";
                                }

                              html += "<div class=\"xc_video-card\">";
                                html += "<div class=\"xc_video-thumbnail\">";
                                    html += "<img src=\""+imageUrl+"\" alt=\"视频缩略图\">";
                                    html += "<div onclick='f_edit(\""+d["code"]+"\")' class=\"xc_play-button\"></div>";
                                    html += "<div style=\"position: absolute; top: 10px; right: 10px; color: white; background: rgba(0,0,0,0.5); padding: 2px 6px; border-radius: 4px; font-size: 12px;\">"+video_count.toString()+"</div>";
                                html += "</div>";
                                html += "<div class=\"xc_video-info\">";
                                    html += "<div class=\"xc_video-title\"><label><input type=\"checkbox\" class=\"check_item\" value=\""+d["id"]+"\"></label> <span style=\"border: 1px solid #ddd; border-radius: 6px; padding: 0 5px;margin-right: 2px;\">"+d["id"]+"</span> "+flow_name+"</div>";
                                    html += "<div class=\"xc_video-meta\">";
                                        html += "<span>"+d["create_time_str"]+"</span>";
                                       html += state_str;
                                   html += "</div>";
                                html += "</div>";
                            html += "</div>";

                           }
                            eleData.html(html);
                            f_show_pageData(res.pageData)
                        }

                   }else{
                       myAlert(res.msg,"error");
                   }
               }
            });

    }
    eleSelectDrawType.change(function () {
        temp_drawType = $(this).val();
        f_openIndex(1,temp_cur_page_size);
    });
    eleSelectControl.change(function () {
        temp_controlCode = $(this).val();
        f_openIndex(1,temp_cur_page_size);
    });
    eleSelectStream.change(function () {
        temp_streamCode = $(this).val();
        f_openIndex(1,temp_cur_page_size);
    });
    eleSelectFlow.change(function () {
        temp_flowCode = $(this).val();
        f_openIndex(1,temp_cur_page_size);
    });
    eleInputDateRange.dateRangePicker({
            language:'cn',//cn,en
            //minDays: 3,
		    //maxDays: 7,
            //format: 'YYYY-MM-DD',
            //startDate: '2024-07-01',
		    //endDate: '2024-08-31'
            //yearSelect: true,
            //startDate: moment().subtract(3, 'months').format('YYYY-MM-DD'),
            //endDate: moment().endOf('day').format('YYYY-MM-DD'),
    }).bind('datepicker-apply',function(event,obj) {
        f_openIndex(1,temp_cur_page_size);
    });

    $(function() {
        f_openIndex(1,temp_cur_page_size);//首次进入 刷新页面
    });


</script>
{% endblock javascripts %}

